<template>
  <transition name="fade"
              v-on:enter="startTimer"
              @after-leave="handleAfterLeave">
    <div :class="[{'m_toast-pc-wrapper':!isMobile, 'm_toast-mobile-wrapper'
         :isMobile,...className},`toast-${type}`]"
         v-show="visible"
         @mouseenter="clearTimer"
         @mouseleave="startTimer">
      <!-- <div class:"m-toast-title">提示</div> -->
      <div class="m_toast-content">
        <div :class="iconClass"
             v-if="isIcon"> <i class="iconfont"
             v-html="getIcon(type)"></i></div>
        <span>{{msg}}</span>
      </div>
    </div>
  </transition>
</template>

<script>
// 字体样式
import './font/iconfont.css'

export default {
  name: 'MToast',
  components: {

  },
  data () {
    return {
      msg: '一段默认文字',
      duration: 113000,
      type: 'info',
      visible: false,
      className: null,
      timer: null,
      closed: false,
      isMobile: false,
      iconClass: 'icon-wrapper-pc',
      isIcon: true
    };
  },
  computed: {

  },
  created () {

  },
  watch: {
    closed: {
      handler: function (val) {
        if (val) {
          this.visible = false;
        }
      }
    },
    isMobile (val) {
      if (val) {
        this.iconClass = 'icon-wrapper-mb'
        return;
      }
      this.iconClass = 'icon-wrapper-pc'
    }
  },
  mounted () {
    let flag = this.isMobileFn();
    if (document.body.clientWidth <= 375 || flag) {
      this.isMobile = true;
    } else {
      this.isMobile = false;
    }
    // this.$nextTick(() => {
    //   this.startTimer();
    // })
  },
  methods: {
    onClose () { },
    handleAfterLeave () {
      this.$destroy()
      this.$el.parentNode.removeChild(this.$el);
    },
    close () {
      this.closed = true;
      if (typeof this.onClose === "function") {
        this.onClose(this);
      }
      this.handleAfterLeave();
    },
    startTimer () {
      if (this.duration > 0) {
        this.timer = setTimeout(() => {
          if (!this.closed) {
            this.close();
          }
        }, this.duration);
      }
    },
    clearTimer () {
      clearTimeout(this.timer);
    },
    getIcon (type) {
      // &#xe655; info
      // &#xe654; warning
      // &&#xe652; success
      // &#xe651; error
      let icon = null;
      switch (type) {
        case 'info':
          icon = '&#xe655;'
          break;
        case 'warning':
          icon = '&#xe654;'
          break;
        case 'success':
          icon = '&#xe652;'
          break;
        case 'error':
          icon = '&#xe651;'
          break;
        default:
          icon = ''
          break;
      }
      return icon;
    },
    /**
     * 检测平台
     */
    isMobileFn () {
      let userAgentInfo = navigator.userAgent;
      let Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"];
      let flag = false;
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = true;
          break;
        }
      }
      return flag;
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
// @import url("./animate.scss");
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-leave,
.fade-enter-to {
  opacity: 1;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s;
}

.m_toast-pc-wrapper,
.m_toast-mobile-wrapper {
  position: fixed;
  left: 50%;
  box-sizing: border-box;
  border-radius: 4px;
}
.m_toast-pc-wrapper {
  top: 30px;
  transform: translateX(-50%);
  // display: flex;
  // align-items: center;
  min-width: 380px;
  padding: 15px 15px 15px 20px;
  border-color: #ebeef5;
  background-color: #edf2fc;
  .m_toast-content {
    padding: 0;
    font-size: 14px;
    line-height: 1;
    color: #909399;
  }
  &.toast-success {
    background-color: #f0f9eb;
    border-color: #e1f3d8;
    .m_toast-content {
      color: #67c23a;
    }
  }
  &.toast-error {
    background-color: #fef0f0;
    border-color: #fde2e2;
    .m_toast-content {
      color: #f56c6c;
    }
  }
  &.toast-warning {
    background-color: #fdf6ec;
    border-color: #faecd8;
    .m_toast-content {
      color: #e6a23c;
    }
  }
}
.m_toast-mobile-wrapper {
  top: 50%;
  transform: translateY(-50%);
  transform: translateX(-50%);
  min-width: auto;
  padding: 6px 18px;
  background: #5b5b5c;
  display: flex;
  align-items: center;
  justify-content: center;
  .m_toast-content {
    font-size: 14px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
.icon-wrapper-pc {
  display: inline-block;
  margin-right: 5px;
  p {
    display: inline-block;
  }
}
.icon-wrapper-mb {
  font-size: 35px;
}
</style>
